<template>
  <div>
    <section class="ourcourse">
      <main>
        <!-- 我们的课区域 -->
        <!-- <ourcourse></ourcourse> -->
        <div class="box">
          <!-- 我们的课区域 -->
          <p class="title"><span>我们的课</span><span class="tips"></span></p>
          <div class="zbcourse">
            <div class="scaleDiv" @click="jump('pte')">
              <router-link to=""
                ><img
                  src="@/assets/imgs/our-course/3.png"
                  class="our-pic"
                  alt=""
              /></router-link>
              <span class="setcenter">
                <p class="title-intro">Easton PTE 精品课程</p>
                <p class="content">
                  技巧班，提升班，刷题班，保过班，专项班，在九炸炸，总有一堂不走弯路的课
                </p>
              </span>
            </div>
            <div class="scaleDiv" @click="jump('yasi')">
              <router-link to="" id="iet"
                ><img
                  src="@/assets/imgs/our-course/4.png"
                  class="our-pic"
                  alt=""
              /></router-link>
              <span class="setcenter">
                <p class="title-intro">雅思课程</p>
                <p class="content">
                  雅思考官团队，打造全新的学习体系，击碎听说读写，直面考场
                </p>
              </span>
            </div>
            <div class="scaleDiv" @click="jump('ccl')">
              <router-link to="/" id="naati"
                ><img
                  src="@/assets/imgs/our-course/2.png"
                  class="our-pic"
                  alt=""
              /></router-link>
              <span class="setcenter">
                <p class="title-intro">NAATI专业服务</p>
                <p class="content">
                  12年NAATI考试、认证专家，资深翻译、一线同传，移民加分、翻译服务
                </p>
              </span>
            </div>
            <div class="scaleDiv" @click="jump('special')">
              <router-link to="/" id="yimin"
                ><img
                  src="@/assets/imgs/our-course/1.png"
                  class="our-pic"
                  alt=""
              /></router-link>
              <span class="setcenter">
                <p class="title-intro">留学移民专项</p>
                <p class="content">
                  上万成功案例，高中至博士课程申请，技术移民，投资，家庭类签证服务
                </p>
              </span>
            </div>
          </div>
        </div>
        <!-- 精选好课区域 -->
        <goodcourse></goodcourse>
        <!-- 免费好课区域 -->
        <div id="good">
          <free-goodcourse></free-goodcourse>
        </div>
        <!-- PTE课程 -->
        <div id="pte">
          <ptecourse></ptecourse>
        </div>
        <!-- 一对一课程 -->
        <div id="vip" ref="vip">
          <vipcourse></vipcourse>
        </div>
        <!-- 雅思课程 -->
        <div id="ielt">
          <ieltscourse></ieltscourse>
        </div>
        <!-- CCL课程 -->
        <div id="ccl">
          <cclcourse></cclcourse>
        </div>
        <!-- 专项服务 -->
        <div id="special">
          <special></special>
        </div>
      </main>
    </section>
  </div>
</template>

<script>
import goodcourse from './Goodcourse'
import freeGoodcourse from './freeGoodcourse'
// import ourcourse from './ourcourse'
import ptecourse from './ptecourse'
import Vipcourse from './vipcourse.vue'
import Ieltscourse from './ieltscourse.vue'
import cclcourse from './cclcourse'
import Special from './special.vue'
export default {
  components: {
    goodcourse,
    freeGoodcourse,
    // ourcourse,
    ptecourse,
    Vipcourse,
    Ieltscourse,
    cclcourse,
    Special,
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    jump (e) {
      console.log(e);
      // document.document.scrollTop = document.querySelector('#vip').offsetTop
      if (e == 'pte') {
        document.querySelector('#pte').scrollIntoView(
          {
            behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
            block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
            inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
          }
        )
      } else if (e == 'yasi') {
        document.querySelector('#ielt').scrollIntoView(
          {
            behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
            block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
            inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
          }
        )
      } else if (e == 'ccl') {
        document.querySelector('#ccl').scrollIntoView(
          {
            behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
            block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
            inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
          }
        )
      } else if (e == 'special') {
        document.querySelector('#special').scrollIntoView(
          {
            behavior: "smooth", // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
            block: "center", // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
            inline: "nearest" // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
          }
        )
      }
    }
  },
}
</script>

<style lang="less" scoped>
.scaleDiv:hover {
  transform: translateY(0.3125rem);
  box-shadow: 0 0 1.25rem 0.125rem #918f8f; /*盒子阴影*/
}
.box {
  margin: auto;
  height: 28.625rem;
  background-color: #eff1f4;
}
.title {
  display: flex;
  width: 75rem;
  margin: auto;
  font-size: 2.5rem;
  text-align: left;
  justify-content: space-between;
  line-height: 2.5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 7rem;
  padding-top: 3.125rem;
  box-sizing: border-box;
  .tips {
    font-size: 1.125rem;
    color: #989799;
  }
  a {
    text-decoration: none;
    color: #989799;
    font-size: 1rem;
  }
}
.zbcourse {
  width: 75rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
  div {
    width: 17.5rem;
    height: 17.5rem;
    background-color: #fff;
    text-align: left;
    transition: all 0.3s;
  }
  a {
    display: flex;
    width: 100%;
    height: 10.1875rem;
    background-color: #abcdef;
    position: relative;
    .our-pic {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .teacher {
    width: 4.875rem;
    height: 1.25rem;
    background-color: #ffdfdc;
    color: #ff8176;
    padding: 0 0.3125rem;
    font-size: 0.875rem;
  }
}
.title-intro {
  font-size: 1.25rem;
  color: #666;
  font-weight: 400;
  padding: 1.25rem;
}
.content {
  height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content,
.pdl20 {
  box-sizing: border-box;
  font-size: 0.875rem;
  color: #999;
  padding: 0 1.25rem;
  margin-top: -0.4375rem;
}
.ourcourse {
  main {
    margin: auto;
    background-color: #f7f7f7;
    text-align: center;
    .fz40 {
      box-sizing: border-box;
      font-size: 2.5rem;
      padding-top: 2.5rem;
      font-weight: 400;
      color: #333333;
    }
    .fz18 {
      font-size: 1.125rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #989799;
      margin-top: 0.9375rem;
    }
    .zbcourse {
      display: flex;
      justify-content: space-between;
      margin-top: 1.25rem;
      div {
        width: 17.5rem;
        height: 17.5rem;
        background-color: #fff;
      }
      a {
        display: flex;
        width: 100%;
        height: 10.1875rem;
        background-color: #abcdef;
        position: relative;
        img {
          // width: 3.125rem;
          // height: 3.125rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
